<template>
    <div class="box">
        <div style="height: 30%;">
            <div class="box1">30%</div>
        </div>
        <div class="box2">50%</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    mounted() {
    },
    methods: {
    },
}
</script>
<style scoped>
/* ************ APP.vue 中必须写下面代码  *************/
/* html,
body {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

#app1 {
  width: 100%;
  height: 100%;
} */
/* **************************************** */

.box {
    height: 100%;
}

.box1 {
    width: 50%;
    height: 100%;
    background-color: orange;
}

.box2 {
    width: 50%;
    height: 70%;
    background-color: aquamarine;
}
</style>